<template>
  <div>
    <el-card class="!border-none relative el-card-client" shadow="never">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="5">
            <el-input
              class="input_style"
              v-model="queryParams.keywords"
              clearable
              placeholder="请输入搜索关键字"
            />
          </el-col>
          <el-col :span="9">
            <el-date-picker
              class="input_style_160"
              v-model="queryParams.start_time"
              type="datetime"
              placeholder="请选择开始时间"
            />&nbsp;—
            <el-date-picker
              class="input_style_160"
              v-model="queryParams.end_time"
              type="datetime"
              placeholder="请选择结束时间"
            />
          </el-col>
          <!-- <el-col :span="2">
                        <el-checkbox v-model="queryParams.status"></el-checkbox>
          </el-col>-->
          <el-col :span="7">
            <el-button
              type="primary"
              @click="getLists"
              class="btn_style mr_10"
              color="#63ccba"
            >
              <template #icon>
                <el-icon color="#fff">
                  <Search />
                </el-icon> </template
              >搜索
            </el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-col>
        </el-row>
      </template>
      <div class="title_height">
        <div class="topContainer mt_10">
          <h1 class="fz_16 font600 text_center" v-if="routesQuery.topTitle">
            {{ routesQuery.topTitle }}
          </h1>
          <div class="flex flexCenter itemsCenter">
            <p class="text_center" v-if="routesQuery.topName">
              选手名称：
              <span class="red fz_16 font600">{{ routesQuery.topName }}</span>
            </p>
            <div class="actor flex itemsCenter ml-10" v-if="routesQuery.images">
              <p class="mr-2">选手图片：</p>
              <el-image
                :src="`${JSON.parse(routesQuery.images)[0].url}`"
                fit="fill"
                style="width: 4rem; height: 4rem"
              ></el-image>
            </div>
          </div>
        </div>
        <el-table
          class="mt_10"
          :data="pager.lists"
          border
          @selection-change="handleSelectionChange"
          v-loading="pager.loading"
          stripe
          height="calc(100vh - 22.5rem)"
        >
          <el-table-column label="id" prop="id" align="center" />
          <el-table-column label="ip" prop="ip" align="center" />
          <el-table-column label="用户昵称" prop="nickname" align="center" />
          <el-table-column label="用户头像" align="center" width="90">
            <template #default="{ row }">
              <div class="demo-image__preview">
                <el-image
                  style="width: 98%; height: 98%"
                  :src="row.avatar"
                  :preview-src-list="[row.avatar]"
                  :initial-index="0"
                  fit="cover"
                  hide-on-click-modal="true"
                  preview-teleported="true"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="地区" prop="ip_address" align="center" />
          <el-table-column label="添加时间" prop="create_time" align="center" />
        </el-table>
      </div>
      <div class="flex mt-4 position">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      :dict-data="dictData"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>

<script lang="ts" setup name="zgGiftLogLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import { apiZgGiftLogLists, apiZgGiftinfo } from "@/api/zg_gift_log";
import { apiZgVotesLogLists, apiZgVotesLogDelete } from "@/api/zg_votes_log";
import { timeFormat } from "@/utils/util";
import { getRoutePath } from "@/router";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
import moveButton from "@/components/moveButton/index.vue";

const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

//路由标题
const route = useRoute();
const routesQuery = route.query;
// 查询条件
const queryParams = reactive({
  keywords: "",
  type: "",
  start_time: "",
  user_id: "",
  end_time: "",
  activity_id: route.query.activity_id,
  player_id: route.query.id,
});

// 选中数据
const selectData = ref<any[]>([]);

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};

// 获取字典数据
const { dictData } = useDictData("zl_type");

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiZgVotesLogLists,
  params: queryParams,
});
//  顶部收益接口
const income = ref<any>({
  monthMoney: 0,
  toDayMoney: 0,
  totalMoney: 0,
});
const getIncome = async () => {
  const res = await apiZgGiftinfo();
  await nextTick();
  income.value = res;
};

getIncome();
getLists();
</script>
<style lang="scss" scoped>
::v-deep.el-card__body {
  padding: 0 !important;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.flex {
  display: flex !important;
}

.input_style {
  width: 100% !important;
}

.align_center {
  align-content: center;
  align-items: center;
  justify-content: left !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 100% !important;
}

.title_height {
}
</style>
